<script setup lang="ts">
interface ConfigInterface {
    rxColor: string,
    txColor: string,
    rxSize: number,
    txSize: number,
    sendHex: string,
    receiveHex: string,
    inputSize: number,
}

const props = defineProps({
    data: {
        type: String,
    },
    mode: {
        // true为接收，false为发送
        type: Boolean,
        default: true
    },
    host: {
        type: String,
    },
    rxColor: {
        type: String,
        default: '#409EFF'
    },
    rxSize: {
        type: Number,
        default: 10
    },
    txColor: {
        type: String,
        default: '#67C23A'
    },
    txSize: {
        type: Number,
        default: 10
    },
})

</script>

<template>
    <div style="width: 100%">
        <div style="width: 100%; text-align: start" v-if="mode">
            <el-text style="display: block">{{(new Date()).toLocaleString() + ' Receive From: ' + host}}</el-text>
            <span :style="'font-size: ' + rxSize + 'px; color: ' + rxColor">{{data}}</span>
        </div>
        <div style="width: 100%; text-align: end; " v-else>
            <el-text type="info" style="display: block; padding-right: 10px;">{{(new Date()).toLocaleString() + ' Send To: ' + host}}</el-text>
            <span style="padding-right: 10px" :style="'font-size: ' + txSize + 'px; color: ' + txColor">{{data}}</span>
        </div>
    </div>
</template>

<style scoped lang="css">

</style>